import React, {Component} from 'react';
import {connect} from 'dva';
import {DatePicker, List} from 'antd-mobile';
import {createForm} from 'rc-form';

import moment from 'moment';
import 'moment/locale/zh-cn';

class DatePickerRow extends Component {

  constructor(props) {
    super(props);
    this.state = {
      value:'',
      maxDate:'',
      minDate:'',
    }
  }

  componentDidMount(){
    const {defaultValue,minDate,maxDate} = this.props;

    // console.log('defaultValue',defaultValue);
    // console.log('minDate',minDate);
    // console.log('maxDate',maxDate);
    this.setState({
      minDate:moment(minDate, 'YYYY-MM-DD').utcOffset(8),
      maxDate:moment(maxDate, 'YYYY-MM-DD').utcOffset(8),
      value:defaultValue ? this.defaultDateTime(defaultValue) : [],
    })

  }

  componentWillReceiveProps(newProps){
    // this.state.minDate = moment(newProps.minDate, 'YYYY-MM-DD').utcOffset(8);
    // this.state.maxDate = moment(newProps.maxDate, 'YYYY-MM-DD').utcOffset(8);
    this.state.value = newProps.defaultValue ? this.defaultDateTime(newProps.defaultValue) : [];
  }

  defaultDateTime = (v) => {
    if (v && v != '') {
      // const birthday = v.substring(0,10)
      let dateTime = moment(v, 'YYYY-MM-DD').utcOffset(8)
      // console.log('dateTime',dateTime);
      return dateTime
    }else{
      return "";
    }
  }

  onOk = (v) => {
    this.setState({
      value:v,
    })
    let nDate = new Date(v);
    let nTime = nDate.getFullYear() + "-" + (nDate.getMonth()+1) + "-" + nDate.getDate();
    this.props.onSelect(nTime)
  }

  render() {
    const {labelName,title,extra} = this.props;
    const {value, minDate, maxDate} = this.state;

    return (
      <DatePicker
        mode="date"
        title={title}
        extra={extra}
        value={value}
        onOk={v => this.onOk(v)}
        maxDate={maxDate}
        minDate={minDate}
        >
        <List.Item arrow="horizontal">{labelName}</List.Item>
      </DatePicker>
    );
  }

}

const DatePickerRowWrapper = createForm()(DatePickerRow);

export default connect()(DatePickerRowWrapper);
